// ==UserScript==
// @name         YY-打标助手
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  YY-打标助手，辅助打标
// @author       jianjian.huang
// @match        *://label.yy.com/*.wav
// @grant        unsafeWindow
// @grant        GM_addStyle 
// @run-at       document-idle
// @require      https://cdn.staticfile.org/jquery/3.5.0/jquery.min.js
// ==/UserScript==
/*
https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css
https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js
https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js
*/
/*
position: fixed;
bottom: 5px;
right: 5px;
margin-left: 5px;
z-index: 99;
*/
(function () {
    'use strict';
    const KEY_CODE_ENTER = 13;
    GM_addStyle(`
    .lh-btn {color: #fff;background-color: #007bff;border-color: #007bff;padding: .375rem .75rem;border-radius: .25rem;}
    .lh-tag-submit {border:3px dotted green;}
    .lh-tag-focus {border:3px solid red;}
    .lh-right-div {float:left;}
    .lh-container {position: fixed;bottom: 5px;right: 5px;margin-left: 5px;z-index: 3000;width:150px;background-color:pink;}
    `);

    console.log('！！！进入到详情页面,启用打标助手！！！');
    //console.log(unsafeWindow);
    //console.log(location.pathname);
    var $container = $('<div class="lh-container" id="dm-notif"></div>');
    // 输入框
    var $input = $('<input maxlength="5" value="11111" size="10" style="text-align:center" />');
    $input.keypress(function(e) {
        // 输入框中输入，阻止事件冒泡
        var keyCode = e.keyCode || e.which || e.charCode;
        var altKey = e.altKey ;
        var ctrlKey = e.ctrlKey ;
        var shiftKey = e.shiftKey;
        console.log('keyCode='+keyCode);
        console.log('alt='+altKey);
        console.log('ctrl='+ctrlKey);
        console.log('shift='+shiftKey);
        // e.target
        if (ctrlKey && keyCode == KEY_CODE_ENTER) {// 组合键 ctrl+回车
            $btn_secondary.click();
        } else if (shiftKey && keyCode == KEY_CODE_ENTER) {
            $btn_primary.click();
        } else if (keyCode == KEY_CODE_ENTER) {// 仅仅只按回车键
            tag_by_single(e.target);
        } 
        e.stopPropagation();
    }).focus(function(){
        var input_index = $input_container.children('div.lh-right-div').index(this.parentNode);
        $('tr.MuiTableRow-root:not(:first)').eq(input_index*2).css('background-color','aqua');
    }).blur(function(){
        var input_index = $input_container.children('div.lh-right-div').index(this.parentNode);
        $('tr.MuiTableRow-root:not(:first)').eq(input_index*2).css('background-color','');
    });
    // 包含输入框的div
    var $input_div_tag = $('<div/>').addClass('lh-right-div').append($input);
    // 存放N个输入框的容器
    var $input_container = $("<div/>").prop("id", "lh-input-container").append($input_div_tag);
    // 存放按钮的区域
    var $input_ctrl_container = $("<div/>").prop("id", "lh-input-control");
    // 需要打标的按钮集合
    var $svg_tags = null;
    // 鼠标单击事件
    var MouseClickEvent = document.createEvent("MouseEvents");
    MouseClickEvent.initEvent("click", true, true);
    
    // 页面元素存在，初始化助手面板
    if ($("#root").length) {
        var $root = $("#root");
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = "https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css";
        var head = document.getElementsByTagName("head")[0];
        //head.appendChild(link);// 加载bootstrap样式会影响页面原样式
        // 按钮
        var $btn_primary = $('<button type="button" class="lh-btn">1.获得所有打标按钮（Shift+Enter）</button>');
        var $btn_secondary = $('<button type="button" class="lh-btn">2.全部打标（Ctrl+Enter）</button>');
        // 按钮外部的div
        var $btn_div1 = $("<div/>").addClass("lh-right-div").append($btn_primary);
        var $btn_div2 = $("<div/>").addClass("lh-right-div").append($btn_secondary);

        $input_ctrl_container.append($btn_div1).append($btn_div2);
        // 添加输入框区域
        $container.append($input_container);
        // 添加按钮
        $container.append($input_ctrl_container);
        // 将助手区域添加到页面
        $root.append($container);
        // 事件绑定
        $btn_primary.click(grap_tag_btn);// 获取所有要打标的按钮
        $btn_secondary.click(auto_tag);//在弹出框中打标
        grap_tag_btn();
        // 整个HTML文档绑定键盘事件
        $(document).keypress(function (e) {
            console.log("document keypress:" + e.keyCode);
            var keyCode = e.keyCode || e.which || e.charCode;
            var altKey = e.altKey ;
            var ctrlKey = e.ctrlKey ;
            var shiftKey = e.shiftKey;
            console.log('document keyCode='+keyCode);
            console.log('document alt='+altKey);
            console.log('document ctrl='+ctrlKey);
            console.log('document shift='+shiftKey);
            // 整个文档接收到了快捷键操作
            if (shiftKey && keyCode == KEY_CODE_ENTER) {
                $btn_primary.click();
            }
            if (ctrlKey && keyCode == KEY_CODE_ENTER) {
                $btn_secondary.click();
            }
        });
    }
    /**
     * 抓取页面所有要打标的标签
     */
    function grap_tag_btn() {
        $svg_tags = null;
        if ($("svg.MuiSvgIcon-fontSizeSmall").length) {
            initInputElement();
            $svg_tags = $("svg.MuiSvgIcon-fontSizeSmall").addClass('lh-tag-focus').removeClass('lh-tag-submit');
        }
        //TODO 弹出打标页面后，文本框不能输入。。。
    }
    // 根据标签数量，生成输入内容
    function initInputElement() {
        var tag_count = $("svg.MuiSvgIcon-fontSizeSmall").length;
        if (tag_count) {
            var input_count = $input_container.children('div.lh-right-div').length;
            var count = tag_count - input_count;
            if (count != 0) {
                // TODO: 优化-数量保持一致????
                if (count > 0) {// 输入框少了，需要增加
                    //根据打标数量，生成同样数量的<div><input/></div>
                    for(var i = 0; i < count; i++) {
                        var $div = $('<div/>').addClass('lh-right-div').append($input.clone(true));
                        $input_container.append($div);
                    }
                } else {//输入框多了，需要减少???
                    $input_container.children('div.lh-right-div:gt('+(tag_count-1)+')').remove();
                }
            }
            //删除所有输入框,只保留第一个
            //$input_container.children('.lh-right-div:not(:first)').remove();
        }
    }
    // 自动打标
    function auto_tag() {
        if ($svg_tags) {
            $svg_tags.each(function(index,item){
                try {
                    //1.弹出
                    item.dispatchEvent(MouseClickEvent);
                    //2.打标
                    fill_tag_to_pop(index);
                    //3.提交
                    submit_tag();
                    //4.高亮标注
                    $(item).removeClass('lh-tag-focus').addClass('lh-tag-submit');
                } catch (error) {
                    console.log('tag error:'+error);
                }
            });
        }
    }
    /**
     * 进行打标操作
     */
    function fill_tag_to_pop(index) {
        var input_val = $input_container.find(":input:text").eq(index).val();
        console.log('input_val输入内容是：[' + input_val + ']');
        if (!input_val) {
            console.error("输入内容不合法/没有对应输入框！！！");
            return;
        }
        if (input_val == "" || input_val.length != 5 || isNaN(input_val)) {
            alert("输入标签值不正确!");
            return;
        }
        var gender_val = input_val.charAt(0);
        var age_val = input_val.charAt(1);
        var source_val = input_val.charAt(2);
        var action_val = input_val.charAt(3);
        var bgs_val = input_val.charAt(4);
        console.log($(":radio[name='Gender']").length);
        console.log($(":radio[name='Age']").length);
        console.log($(":radio[name='Source']").length);
        console.log($(":radio[name='Action']").length);
        console.log($(":radio[name='BGS']").length);
        if ($(":radio[name='Gender']").length) {
            $(":radio[name='Gender']").get(gender_val - 1).dispatchEvent(MouseClickEvent);
        }
        if ($(":radio[name='Age']").length) {
            $(":radio[name='Age']").get(age_val - 1).dispatchEvent(MouseClickEvent);
        }
        if ($(":radio[name='Source']").length) {
            $(":radio[name='Source']").get(source_val - 1).dispatchEvent(MouseClickEvent);
        }
        if ($(":radio[name='Action']").length) {
            $(":radio[name='Action']").get(action_val - 1).dispatchEvent(MouseClickEvent);
        }
        if ($(":radio[name='BGS']").length) {
            $(":radio[name='BGS']").get(bgs_val - 1).dispatchEvent(MouseClickEvent);
        }
    }
    /**
     * 确认打标
     */
    function submit_tag() {
        var btn_submit = $("div.MuiDialogActions-spacing").children("button").get(1);
        console.log('按钮文本:' + btn_submit.textContent.toLowerCase());//按钮文本 submit
        btn_submit.dispatchEvent(MouseClickEvent);
    }
    /**
     * 根据单个输入框打标
     */
    function tag_by_single(ele) {
        var input_index = $input_container.children('div.lh-right-div').index(ele.parentNode);
        var item = $svg_tags.get(input_index);
        item.dispatchEvent(MouseClickEvent);
        fill_tag_to_pop(input_index);
        submit_tag();
        $(item).removeClass('lh-tag-focus').addClass('lh-tag-submit');
    }
})();
